<template>
  <el-dialog
    v-model="props.editDialog"
    title="编辑维保项目"
    width="35%"
    :show-close="false"
  >
    <el-form :model="form" ref="formRef">
      <el-form-item
        label="设备类型"
        prop="deviceType"
        :rules="{
          required: true,
          message: '请选择设备类型',
          trigger: 'change'
        }"
      >
        <el-cascader
          ref="deviceRef"
          v-model="form.deviceType"
          :show-all-levels="false"
          :options="deviceTypes"
          :props="cascaderProps"
          @change="deviceChange"
          filterable
          placeholder="可输入设备类型名称搜索"
        />
      </el-form-item>
      <el-form-item
        label="维保项目名称"
        prop="itemName"
        :rules="{
          required: true,
          message: '请输入项目名称',
          trigger: 'blur'
        }"
      >
        <el-input
          v-model="form.itemName"
          type="textarea"
          placeholder="请输入维保项目名称"
          maxlength="128"
          show-word-limit
          :rows="2"
        />
      </el-form-item>
      <el-form-item
        label="维保内容"
        prop="content"
        :rules="{
          required: true,
          message: '请输入维保内容',
          trigger: 'blur'
        }"
      >
        <el-input
          v-model="form.content"
          type="textarea"
          placeholder="请输入维保内容"
          maxlength="200"
          show-word-limit
          :rows="2"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel(formRef)">取消</el-button>
        <el-button type="primary" @click="submit(formRef)" :loading="loading">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance } from 'element-plus'
import { ref, reactive, watch } from 'vue'
import { saveDeviceItemApi, updateDeviceItemApi } from '/@/api/maintain'
import { dictionaryList } from '/@/api/publicApi'
const props = defineProps({
  editDialog: Boolean,
  editForm: Object
})
const cascaderProps = {
  expandTrigger: 'click' as const,
  value: 'id',
  label: 'configValue',
  emitPath: false,
  checkStrictly: true
}
const emit = defineEmits(['editCancel', 'editSubmit'])
const formRef = ref<FormInstance>()
const deviceRef = ref()
const loading = ref(false)
const formLabelWidth = ref('120px')
const form = ref({
  id: '',
  deviceType: '',
  deviceTypeName: '',
  itemName: '',
  content: ''
})

const deviceTypes = ref([])

const getDeviceType = () => {
  dictionaryList({ configType: 'device_type', keyword: '' }).then((res) => {
    if (res.code == 0) {
      deviceTypes.value = res.data
    }
  })
}
getDeviceType()

const deviceChange = (val: any) => {
  let obj = deviceRef.value.getCheckedNodes()
  form.value.deviceTypeName = obj[0].label
}

const submit = async (formEl: FormInstance | undefined) => {
  loading.value = true
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      updateDeviceItemApi(form.value).then((res) => {
        if (res.code == 0) {
          ElMessage.success('修改成功')
          loading.value = false
          emit('editSubmit')
        } else {
          loading.value = false
        }
      })
    } else {
      loading.value = false
    }
  })
}

const cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emit('editCancel')
}

watch(
  () => props.editDialog,
  () => {
    form.value.content = props.editForm?.content
    form.value.itemName = props.editForm?.itemName
    form.value.id = props.editForm?.id
    form.value.deviceType = props.editForm?.deviceType
    form.value.deviceTypeName = props.editForm?.deviceTypeName
  }
)
</script>
<style scoped lang="scss">
.addList {
  color: var(--el-color-primary);
  cursor: pointer;
}
</style>
